<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.ico">
  <title>壹脉智能CRM</title>
  <link href="./css/bootstrap.min.css" rel="stylesheet">
  <link href="./css/perfect-scrollbar.min.css" rel="stylesheet">
  <link href="css/style.min.css" rel="stylesheet">
  <!-- You can change the theme colors from here -->
  <link href="css/colors/default.css" id="theme" rel="stylesheet">
  <link rel="stylesheet" href="css/diy.min.css">

</head>

<body class="fix-header fix-sidebar card-no-border">
  <div class="preloader">
    <div class="loader">
      <div class="loader__figure"></div>
      <p class="loader__label">壹脉</p>
    </div>
  </div>
  <div id="main-wrapper">
    <!-- 导航 -->
    <header class="topbar">
      <nav class="navbar top-navbar navbar-expand-md navbar-light">
        <div class="navbar-header">
          <a class="navbar-brand" href="../index.html">
            <b>
              <img src="../assets/images/diy/yimai.png" alt="homepage" class="dark-logo"/>
            </b>
            <span>
              <span class="fs18 cblue p-l-6 fbold">壹脉智能CRM</span>
            </span>
          </a>
        </div>
        <div class="navbar-collapse">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link nav-toggler hidden-md-up waves-effect waves-dark"href="javascript:void(0)">
                <i class="sl-icon-menu"></i>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link sidebartoggler hidden-sm-down waves-effect waves-dark"href="javascript:void(0)">
                <i class="sl-icon-menu"></i>
              </a>
            </li>
          </ul>
          <user-head></user-head>
        </div>
      </nav>
    </header>
    <!-- 侧边栏 -->
    <aside class="left-sidebar">
      <div class="scroll-sidebar">
        <company-position></company-position>
        <nav class="sidebar-nav p-0">
          <c-slider current="14"></c-slider>
        </nav>
      </div>
    </aside>
    <!-- main -->
    <div class="page-wrapper">
      <div class="container-fluid">
        <div class="row page-titles">
            <div class="col-md-5 align-self-center">
                <h3 class="text-themecolor">访客数据</h3>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">HOME</a></li>
                    <li class="breadcrumb-item active">访客数据</li>
                </ol>
            </div>
        </div>
        <div class="row bgfff p-t-30 p-l-30 p-r-31 p-b-30 m-b-20">
          <el-row style="width: 100%">
            访客数据列表
          </el-row>
          <div class="mr-auto d-flex p-l-30 fs14 cfff lh30 align-cen">
            <div class="m-r-21">
              <el-form ref="form" :model="form" label-width="80px" inline="true">

                <el-form-item label="员工">
                  <el-select v-model="form.userId" clearable placeholder="请选择">
                    <el-option
                            v-for="item in staffs"
                            :key="item.userId"
                            :label="item.name"
                            :value="item.userId">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="来源">
                  <el-select v-model="form.source" clearable placeholder="请选择">
                    <el-option
                            v-for="item in sources"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="是否授权">
                  <el-select v-model="form.auth" clearable placeholder="请选择">
                    <el-option
                            v-for="item in auths"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="浏览时间">
                  <el-date-picker clearable
                                  v-model="form.createTime"
                                  type="daterange" style="width: 390px"
                                  range-separator="至"
                                  start-placeholder="开始日期"
                                  end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>

                <el-form-item label="用户手机">
                  <el-input v-model="form.phone" clearable></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="searchPage" class="btncss">查询</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <el-row style="overflow-x:auto;width: 100%;display:block;">
            <el-table border align="center"  highlight-current-row
                    :data="tableData"
                    style="overflow-x:auto;width: 100%;display:block;" >

              <el-table-column align="center" type="index" width="50"> </el-table-column>
              <el-table-column align="center" prop="nickeName" label="微信名称"  width="150"> </el-table-column>
              <el-table-column align="center"  prop="name" label="业务员" width="120"> </el-table-column>
              <el-table-column align="center" prop="source" label="来源"> </el-table-column>
              <el-table-column align="center" prop="phone"  label="手机号" > </el-table-column>
              <el-table-column align="center" prop="visitTime" label="最近浏览时间" width="140">  </el-table-column>
              <el-table-column align="center" prop="sumNum" label="总次数">   </el-table-column>
              <el-table-column align="center" prop="sumTimes" label="总时长"  >   </el-table-column>
              <el-table-column align="center" prop="forwardfNum" label="转发次数">   </el-table-column>
              <el-table-column align="center" fixed="right" label="操作"  width="170">
                <template slot-scope="scope">
                  <el-button type="text"  size="small" @click="toMonopoly(scope.row)"> {{scope.row.customerState === 2 ?  '抢为独占' : '移至共享'}}
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
          <el-row  style="margin-top:10px;">
            <el-pagination
                           layout="total, sizes, prev, pager, next"
                           :current-page="current"
                           :page-sizes="[10, 20, 50, 100]"
                           :page-size="pageSize"
                           :total="totalCount"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
            />
          </el-row>
          <div class="fs14 p-t-18 p-b-15"></div>
        </div>
      </div>
    </div>
  </div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/perfect-scrollbar.jquery.min.js"></script>
<script src="js/sidebarmenu.js"></script>
<script src="js/custom.min.js"></script>
<script src="js/layer/layer.js"></script>
<script src="js/vue.js"></script>
<script src="js/config.js"></script><script src="js/extend.js"></script>
<script>
  $(function () {
    let formatDate = Vue.filter('formatDate');
    var vw = new Vue({
      el: '#main-wrapper',
      data: {
        couponList: [],
        totalCount : 0,
        pubState:true,
        current: 1 ,
        pageSize:10,
        tableData: [],
        staffs:[{id:0,name:'全部'}],
        auths:[{id:3,name:'全部'},{id:1,name:'已授权手机'},{id:0,name:'未授权手机'}],
        sources:[{id:0,name:'全部'},{id:1,name:'文章'},{id:2,name:'名片'},{id:3,name:'海报'}],
        form:{
          userId:'',
          auth:'',
          phone:'',
          createTime:[],
          source:'',
        }
      },
      mounted() {
        this.searchPage();
        this.queryCompanyStaff();
      },
      methods: {
        queryCompanyStaff(){
          const data = {
            data:{
            companyId:0}
          };

          $.cAjax('/crmPc/customerEssay/queryCompanyStaff',data).then(data => {
            if(data){
              this.staffs = data;
            }
          }).catch(function (err) {
          });
        },
        searchPage(){
          const setting = {
            data : {
              pageSize : this.pageSize,
              pageNum : this.pageNum,
              authPhone:this.form.auth,
              userId:this.form.userId,
              source:this.form.source,
              phone:this.form.phone,
              visitTimeStart: this.form.createTime && this.form.createTime.length > 0 ?  formatDate(this.form.createTime[0], 'yyyy-MM-dd') +" 00:00:00" : '',
              visitTimeEnd: this.form.createTime && this.form.createTime.length > 0 ?  formatDate(this.form.createTime[1], 'yyyy-MM-dd') +" 23:59:59" : '',
            }
          }
          $.cAjax('/crmPc/customerEssay/queryVisitorsData',setting).then(data => {
            if(data){
              this.tableData = data.list;
              this.tableData.forEach(item=>{
                item.salesman = true
              })
              this.totalCount = data.total;
            }
          }).catch(function (err) {
          });
        },
        handleSizeChange(pageSize) {
          this.pageSize = pageSize
          this.searchPage();

        },
        handleCurrentChange(currentPage) {
          this.currentPage = currentPage
          this.searchPage();
        },
        // 抢为独占
        toMonopoly(row){
          //1:独占客户 2:共享客户
          if(row.customerState == 2){
            $.cAjax('/crmPc/customer/updBatchCustomerState', {
              data:{
                customerIds: row.customerId
              }
            }).then((data) => {
              layer.alert('抢为独占成功', {time: 1500});
              this.searchPage();
            });
          }else{
            this.moveCustomer(row);
          }
        },
        // 移动客户
        moveCustomer(customerState,row) {
          $.cAjax('/crmPc/customer/moveCustomer', {
            data:{
              customerIds: row.customerId,
              customerState: 2,
              ascriptionId: row.ascriptionId,
            }
          }).then((data) => {
            layer.alert(customerState == 1 ? '已移交给其他员工' : '移至共享成功', {time: 1500});
            this.searchPage();
            if (customerState == 1) {
              setTimeout(function () {
                history.back();
              }, 1.5*1000)
            }
          });
        },
      }

    })
  })
</script>


  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="css/index.css">
  <style type="text/css">
    .btncss{
      background-color: #51CDCB;
      border: 1px #51CDCB solid;
      color: white;
      margin-left: 20px;
    }
  </style>
</body>
</html>

